<template>

  <div class="echarts">
    <div id="ChartFour" :style="{ height: '100%'}"></div>
  </div>
  
</template>

<script>
  // 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  name: 'hello',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    this.drawLine();
  },
  
  methods: {
    drawLine() {
      
      let mainChart = echarts.init(document.getElementById('ChartFour'));
      window.addEventListener('resize', mainChart.resize);
      // 绘制图表
      mainChart.setOption({
        title: { text: 'ECharts 入门示例' },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          axisLabel:{
            interval:0,
          }
        },
        yAxis: {
          max:40,
          min:0,
          splitNumber:4,
        },
        series: [{
          name: '销量',
          type: 'line',
          data: [5, 20, 36, 10, 10, 20]
        }]
      });
    }
    
  }
}
    
</script>
<style scoped>
  .echarts {
    padding-left: 20px;
    padding-top: 20px;
    width: 50%;
    height: 50%;
    float: left;
  }
  
</style>
 